
* {
    /*

    */
    box-sizing: border-box;
}

ul {
    /*

    */
    list-style-type: none;
}

body {
    /*
        字体回退机制
      这个声明采用了‌字体回退机制‌，浏览器会从左到右依次尝试使用指定的字体
      首先尝试使用Verdana字体，如果用户的设备上没有安装Verdana，则会使用系统默认的无衬线字体（sans-serif）来显示文本
        字体类型说明
      Verdana‌：     是一种专门为屏幕显示设计的无衬线英文字体，在小字号下仍能保持清晰可读
      sans-serif‌：  是‌无衬线字体族‌的统称，这类字体笔画简洁，没有额外的装饰线条，更适合在屏幕上阅读
    */
    font-family: Verdana, sans-serif;
}

.month {
    /*
        上下70px,左右25px
    */
    padding: 70px 25px;
    width: 100%;
    background: #1abc9c;
}

/*
    下面表示同时满足
*/
.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    /*
        text-transform: uppercase; 是一个CSS属性声明，用于将元素内的‌英文字母全部转换为大写形式‌
        该属性还支持：
            lowercase：  全部小写
            capitalize： 每个单词首字母大写
            none：       保持原样（默认值）
         使用这个属性只会改变文本的‌视觉显示效果‌，不会修改原始的文本内容
    */
    text-transform: uppercase;
    letter-spacing: 3px;
}

.month .prev {
    /*
        CSS的float属性是一种传统的布局定位属性，用于控制HTML元素的水平浮动方向
            float属性主要有三个取值：left（左浮动）、right（右浮动）和none（不浮动）
            当元素设置浮动后，会脱离标准文档流的控制，向左或向右漂浮，这使得其他元素可以环绕在它们周围。
    */
    float: left;
    padding-top: 10px;
}

.month .next {
    float: right;
    padding-top: 10px;
}

.weekdays {
    margin: 0;
    padding: 10px 0;
    /*
        background是一个复合属性,
        background-color 只是设置背景颜色
        #dddd 相当于 #dddddd
    */
    background-color: #ddd;
}

.weekdays li {
    display: inline-block;
    width: 13.6%;
    /*
        #666 相当于 #666666
    */
    color: #666;
    text-align: center;
}

.days {
    padding: 10px 0;
    /*
        #eee 相当于 #eeeeee
    */
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size: 12px;
    /*
        #777 相当于 #777777
    */
    color: #777;
}

.days li .active {
    padding: 5px;
    background: #1abc9c;
    /*
        !important规则的作用‌：
         提高指定CSS样式规则的应用优先权
    */
    color: white !important;
}

@media screen and (max-width: 720px) {
    /*
        上面表示 当视口宽度小于或等于720像素时
        下面的 , 表示和的意思
    */
    .weekdays li, .days li {
        width: 13.1%;
    }
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {
        width: 12.5%;
    }

    /*
        下面表示同时满足
    */
    .days li .active {
        padding: 2px;
    }
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {
        width: 12.5%;
    }
}

/*
    box-sizing 属性 这个属性决定了如何计算元素的总宽度和总高度
    它有两个主要的值:
    1. content-box (默认值)
       宽度和高度只包含内容区域(就宽度而言就是下面的 width)
       增加内边距(padding)和边框(border)会增加元素的总尺寸
       公式: 总宽度=width + Padding-Left + Padding-Right + Border-Left + Border-Right

    2.border-box
       宽度和高度包含内容，内边距和边框
       增加内边距(padding)和边框(border)不会增加元素的总尺寸，而是压缩内容区域
       公式: 总宽度=width( 内容+ Padding-Left + Padding-Right + Border-Left + Border-Right )


    CSS list-style-type 属性用于设置列表项前标记的样式类型，控制无序列表（<ul>）和有序列表（<ol>）的项目符号或编号显示方式。
       主要取值和用途：
          无序列表常用值：‌
             disc    ●   实心圆点（默认）
             circle  ○   空心圆圈
             square  ■   实心方块
             none        无标记
          ‌有序列表常用值：‌
             decimal                    1, 2, 3... 阿拉伯数字
             decimal-leading-zero       01, 02, 03... 前导零数字
             lower-roman                i, ii, iii... 小写罗马数字
             upper-roman                I, II, III... 大写罗马数字
            lower-alpha                 a, b, c... 小写字母
            upper-alpha                 A, B, C... 大写字母
*/